<template>
  <div ref="realDataCharts4" class="dataChart" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'RealDataCharts4',

  data () {
    return {
      charts: '',
      opinion: [],
      opinionData: [],
      count: 0,
      timer: ''
    }
  },

  // 调用
  mounted () {
    this.drawPie()
  },
  beforeDestroy () {
    clearInterval(this.timer)

    this.timer = null
  },
  methods: {
    drawPie () {
      this.charts = echarts.init(this.$refs.realDataCharts4)
      this.charts.setOption({
        series: [
          {
            name: '车流量',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['15%', '45%'],
            startAngle: 225,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#46d3f3' // fc8d89
                },
                {
                  offset: 1,
                  color: '#46d3f3' // fc8d89
                }
              ]),
              'transparent'
            ],
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: 75,
                name: '车流量',
                label: {
                  normal: {
                    formatter: '车流量',
                    textStyle: {
                      color: '#fff',
                      fontSize: 16
                    }
                  }
                }
              },
              {
                value: 25,
                name: '%',
                label: {
                  normal: {
                    formatter: '\n\n3545',
                    textStyle: {
                      color: '#007ac6',
                      fontSize: 20
                    }
                  }
                }
              },
              {
                value: 0,
                name: '%',
                label: {
                  normal: {
                    formatter: '',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              }
            ]
          },
          {
            name: '平均速度',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['38%', '45%'],
            startAngle: 225,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#9FE6B8'
                },
                {
                  offset: 1,
                  color: '#32C5E9'
                }
              ]),
              'transparent'
            ],
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: 75,
                name: '平均速度',
                label: {
                  normal: {
                    formatter: '平均速度',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              },
              {
                value: 25,
                name: '%',
                label: {
                  normal: {
                    formatter: '\n\n35',
                    textStyle: {
                      color: '#007ac6',
                      fontSize: 20
                    }
                  }
                }
              },
              {
                value: 0,
                name: '%',
                label: {
                  normal: {
                    formatter: '',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              }
            ]
          },
          {
            name: '拥堵里程',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['62%', '45%'],
            startAngle: 225,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: 75,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#FDFF5C'
                      },
                      {
                        offset: 1,
                        color: '#FDFF5C'
                      }
                    ])
                  }
                },
                name: '拥堵里程',
                label: {
                  normal: {
                    formatter: '拥堵里程',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              },
              {
                value: 25,
                name: '%',
                label: {
                  normal: {
                    formatter: '\n\n3534',
                    textStyle: {
                      color: '#f125ff',
                      fontSize: 20
                    }
                  }
                }
              },
              {
                value: 0,
                name: '%',
                label: {
                  normal: {
                    formatter: '',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              }
            ]
          },
          {
            name: '拥堵里程比例',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['85%', '45%'],
            startAngle: 225,
            labelLine: {
              normal: {
                show: false
              }
            },
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: 75,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#FF9F7F'
                      },
                      {
                        offset: 1,
                        color: '#FB7293'
                      }
                    ])
                  }
                },
                name: '拥堵里程比例',
                label: {
                  normal: {
                    formatter: '拥堵里程比例',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              },
              {
                value: 25,
                name: '%',
                label: {
                  normal: {
                    formatter: '\n\n3534',
                    textStyle: {
                      color: '#f125ff',
                      fontSize: 20
                    }
                  }
                }
              },
              {
                value: 0,
                name: '%',
                label: {
                  normal: {
                    formatter: '',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  }
                }
              }
            ]
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.dataChart {
  width: 100%;
  height: 180px;
}
</style>
